import { Component, OnInit, Input, ElementRef, Renderer2 } from '@angular/core';
import { NavParams } from '@ionic/angular';

import { DataService } from '@services/data.service';

import { CacheService } from '@services/cache.service';
import { MyNoteService } from '@services/myNote.service';
import { AlarmEchartsService } from '@services/echarts/alarm.echarts.service';
import { interval } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'alarm-count',
  templateUrl: 'alarm-count.html',
  styleUrls: ['alarm-count.scss']
})
export class AlarmCountPage implements OnInit {
  @Input() type;          // 判断是集团还是项目
  companyId;              // 集团ID
  projectId;              // 项目ID
  countOptions;           // 告警统计图表参数
  AlarmType;              // 告警类型数据
  AlarmCount: any = {          // 初始化告警统计数据
    serious: {},
    general: {},
    totalCount: 0,
  };
  ChartsHide;             // 无数据时隐藏框
  ErroHide;
  typeOptions;            // 告警类型图表参数
  ItemIndex = [0, 0];     // 设置默认选择的时间
  refreshInterval;


  // 设置默认不显示下拉列表
  TimeBoolean = [false, false];

  // 设置可切换的时间
  TimeItem = ['今日', '昨日', '本周', '上周'];

  // 设置默认显示的时间
  timeOver = [this.TimeItem[0], this.TimeItem[0]];

  constructor(
    private cache: CacheService,
    // private navParams: NavParams,
    private myNote: MyNoteService,
    private dataService: DataService,
    private chart: AlarmEchartsService,
    public el: ElementRef,
    public renderer: Renderer2,
    private activatedRoute: ActivatedRoute
  ) {
    this.activatedRoute.queryParams.subscribe(params => {
      this.companyId = params.companyId ? params.companyId
        : this.cache.currentCompany.companyId;
      this.projectId = params.projectId ? params.projectId
        : this.cache.currentProject.projectId;
    });
  }

  ngOnInit() {
    this.getData(this.type, null, 1);
  }

  // 告警统计日期切换
  ListShow = function (i) {
    for (let m = 0; m < this.TimeBoolean.length; m++) {
      const obj = this.el.nativeElement.querySelector('.Day' + m);
      this.renderer.setStyle(obj, 'transition', 'height 0.5s');
      if (m === i) {
        this.TimeBoolean[m] = !this.TimeBoolean[m];
        if (this.TimeBoolean[m]) {
          this.renderer.setStyle(obj, 'height', '160px');
        } else {
          this.renderer.setStyle(obj, 'height', '0');
        }
      } else {
        this.TimeBoolean[m] = false;
        this.renderer.setStyle(obj, 'height', '0');
      }
    }
  };

  // 告警类型切换
  ItemTimeSelect(ele, index) {
    const obj = this.el.nativeElement.querySelector('.Day' + ele);
    this.renderer.setStyle(obj, 'height', '0');
    this.timeOver[ele] = this.TimeItem[index];
    this.TimeBoolean[ele] = !this.TimeBoolean[ele];
    this.ItemIndex[ele] = index;
    const TimeType = index + 1;
    this.getData(this.type, ele, TimeType);
  }

  // 切换告警统计或告警类型数据
  getData(type, ele, TimeType) {
    switch (ele) {
      case 0:
        this.getAlarmCount(type, this.companyId, this.projectId, TimeType);
        break;
      case 1:
        this.getAlarmType(type, this.companyId, this.projectId, TimeType);
        break;
      default:
        this.getAlarmCount(type, this.companyId, this.projectId, TimeType);
        this.getAlarmType(type, this.companyId, this.projectId, TimeType);
    }
  }

  /**
   * 获取集团及项目告警统计数据
   * @param type
   * @param projectId
   * @param TimeType
   */
  getAlarmCount(type, companyId, projectId, TimeType) {
    if (type === 1) {
      this.dataService.getGroupAlarmCount(companyId, TimeType).subscribe(res => {
        this.AlarmCount.general = res.data && res.data.datas ? res.data.datas[0] : {};
        this.AlarmCount.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0;
        this.AlarmCount.serious = res.data && res.data.datas ? res.data.datas[1] : {};
        this.countOptions = this.ReportCharts(this.AlarmCount);
      });
    } else {
      this.dataService.getAlarmCount(projectId, TimeType).subscribe(res => {
        this.AlarmCount.general = res.data && res.data.datas ? res.data.datas[0] : {};
        this.AlarmCount.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0;
        this.AlarmCount.serious = res.data && res.data.datas ? res.data.datas[1] : {};
        this.countOptions = this.ReportCharts(this.AlarmCount);
      });
    }
  }

  /**
   * 获取集团及告警类型数据
   * @param type
   * @param projectId
   * @param TimeType
   */
  getAlarmType(type, companyId, projectId, TimeType) {
    if (type === 1) {
      this.dataService.getGroupAlarmType(companyId, TimeType, false).subscribe(res => {
        this.AlarmType = res.data;
        this.typeOptions = this.ReportTypeitems(this.AlarmType);
      });
    } else {
      this.dataService.getAlarmType(projectId, TimeType, false).subscribe(res => {
        this.AlarmType = res.data;
        this.typeOptions = this.ReportTypeitems(this.AlarmType);
      });
    }
  }

  // 绘制告警统计图表
  ReportCharts(data) {
    if (data.totalCount) {
      this.ChartsHide = false;
      const ReportTotalNum = data.totalCount ? data.totalCount.toString() : '0';
      const ReportSeriousNum = data.serious ? data.serious.alarmCount : 0;
      const ReportNormalNum = data.general ? data.general.alarmCount : 0;
      return this.chart.showReportPie(ReportTotalNum, ReportNormalNum, ReportSeriousNum);
    } else {
      this.ChartsHide = true;
    }
  }

  // 绘制告警类型图表
  ReportTypeitems(data) {
    const Name = [];
    const num = [];
    const deal = [];
    let color;
    if (data && data.datas) {
      this.ErroHide = false;
      for (const item of data.datas) {
        Name.push(item.alarmTypeName);
        if (item.alarmLevel === 1) {
          color = '#FFCF54';
        }
        if (item.alarmLevel === 2) {
          color = '#1FB5FF';
        }
        num.push({
          name: item.alarmTypeName,
          value: item.alarmCount,
          itemStyle: {
            normal: {
              color: color,
              barBorderRadius: [20, 20, 0, 0]
            }
          }
        });
        deal.push(item.responseCount);
      }
      const ReportTypeName = Name ? Name : [];
      const ReportTypeTotalNum = num ? num : [];
      const ReportTypeDeal = deal ? deal : [];
      return this.chart.showReportBar(ReportTypeName, ReportTypeTotalNum, ReportTypeDeal);
    } else {
      this.ErroHide = true;
    }
  }

}
